<template>
  <view
    class="custom-comp"
    :class="[getDisabled && 'is-disabled', getBorder && 'is-border']"
  >
    <picker mode="time" style="flex: 1" :value="value" @change="onChange" :disabled="getDisabled">
      <PickerValue
        style="height: 100%"
        :value-text="getShowValue"
        :placeholder="getPlaceholder"
        :disabled="getDisabled"
        :icon="'\ue62e'"
      />
    </picker>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { computed, ref } from 'vue';
  import { useFormItem } from '../hooks/useContext';
  import PickerValue from './PickerValue.vue';

  const props = defineProps({
    value: propTypes.string.def(''),
    placeholder: propTypes.string.def('请选择时间'),
  });

  const showValue = ref('');
  const getShowValue = computed(() => getProps.value.modelValue || props.value);

  const { getProps, setFormModel, formProps } = useFormItem(props);

  const getDisabled = computed(() => {
    return getProps.value.disabled;
  });

  const getPlaceholder = computed(() => {
    return getProps.value.placeholder || props.placeholder;
  });

  const getBorder = computed(() => !formProps?.border);

  const onChange = (e: any) => {
    showValue.value = e.detail?.value || '';
    setFormModel(e.detail?.value);
  };
</script>

<style lang="scss" scoped>
  @import '../styles/form.scss';
</style>
